<template>
  <!-- 动态滚动加载设置：本质就是小容器在大容器内的位移完成滚动效果 -->
  <!-- 列表容器外层的大容器   -->
  <div>
    <nav>导航</nav>
    <div class="box" :style="{ height }">
      <!-- 陈列所有列表项的子容器 -->
      <div class="itembox">
        <div class="item" v-for="item in cinemas" :key="item.cinemasId">
          <div class="left">
            <div>{{ item.name }}}</div>
            <div>{{ item.address }}}</div>
          </div>
          <div class="right">
            <div>￥{{ item.lowPrice }}元</div>
            <!-- <div>{{item.gpsAddress}}</div> -->
            <hr />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BetterScroll from "better-scroll";
import { cinemaData } from "../../api/api";
import Vue from "vue";
import { Toast, Notify } from "vant";
Vue.use(Toast);
Vue.use(Notify);

// 缺一个数据加载中模块
export default {
  data() {
    return {
      //建立一个数组用于存贮请求过来的数据
      cinemas: [],
      //滚动容器的宽高要计算出来
      height: 0,
      //滚动对象,由于本身也使用了动画效果，因此也需要在beforeDestroy()声明周期阶段销毁
      scroll: null,
    };
  },
  components: {},

  methods: {
    //由于首次进入和上拉下拉都有调用加载数据，将加载数据函数放这，以便下边调动
    async getData(flag = 1) {
//加载提示框，动态组件;这个组件稍后最好专门封装成一个文件，避免再显示层过多逻辑
    Toast.loading({
      message: "加载中...",
      forbidClick: true,
      //  duration: 0, 
      // 持续展示 toast,一直转，表面会有个透明层，后边的无法点击,也可再次进行设置
      //插件介绍最后有各个属性说明，
    });


      let ret = await cinemaData();
      if (flag == 1) {
        this.cinemas = [...ret.data.data.cinemas, ...this.cinemas];
      } else {
        this.cinemas = [...this.cinemas, ...ret.data.data.cinemas];
      }
      //数据加载完成后 关闭提示
      Toast.clear()
      Notify('通知内容')
    },
  },

  async mounted() {
    //外层滚动容器高度
    // 100是导航的高度
    this.height = document.documentElement.clientHeight - 100 + "px";

    //此处是异步获取数据，虽然加了async和await让看起来像同步一样执行，但是本质还是异步请求
    //因此一开始的时候是数据没有进来，元素也没有循环开，所以高度是0，会导致无法滚动
    this.getData();

    //异步执行完毕后执行的方法
    //上拉下拉事件放这里，详情api官网有
    this.$nextTick(() => {
      this.scroll = new BetterScroll(".box", {
        pullUpLoad: true,
        pullDownRefresh: true,
      });

      //上拉事件,请求数据
      this.scroll.on("pullingDown", () => {
        this.getData(2);
        this.scroll.finishPullDown();
        console.log("到ding了");
      });
      //下拉事件,请求数据
      this.scroll.on("pullingUp", () => {
        //没有这句话，这个事件就只能执行一次，默认会认为那个下拉动画没有结束还是上一次的
        this.getData(1);
        this.scroll.finishPullUp();
        console.log("到底了");
      });
    });
  },

  beforeDestroy() {
    this.scroll = null;
  },
};
</script>

<style lang="scss" scoped>
nav {
  width: 100%;
  height: 30px;
  background: coral;
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
}
.box {
  width: 100%;
  overflow: hidden;
  .itembox {
    // margin-top: 100px;
    .item {
      display: flex;
      .left {
        flex: 2;
      }
    }
    .right {
      background: yellowgreen;
    }
  }
}
</style>
